<template>
  <div id="background">
    <div id="logo">行为决策实验平台</div>

    <div id="countdown">
      <van-count-down millisecond :time="time" format="ss:SS" @finish="onFinish" id="color"/>
    </div>
    <div id="tupian">
      <img style="width: 400px; height: 400px" src="../assets/3d-jijin.webp" id="src">
    </div>
    <div id="text">
      <span id="wait" class="demonstration">请您耐心等待...</span>
    </div>
  </div>
</template>

<script>
import {startTime} from "@/api/stage";
import { ref } from 'vue';
import {selectAllByExperimentId} from "@/api/Initial";
let setStageTime = 0
let setRoundTime = 0
export default {
  data(){
    return{
      countdown:0,
    }
  },

  setup() {
    const time = ref( 10* 1000);
    return { time };
  },
  mounted() {
    selectAllByExperimentId(parseInt(this.$cookies.get('sites'))).then(res => {
      setStageTime = parseInt( res.data.data.all.stageInitial )
      setRoundTime = parseInt( res.data.data.all.roundInitial )
      console.log(res.data.data.all)
    })
  },
  methods: {

    onFinish(){
      this.$cookies.remove('roundId')
      this.$cookies.remove('stageId')
      this.$cookies.remove('rest')
      this.$cookies.remove('fundOne')
      this.$cookies.remove('fundTwo')
      this.$cookies.remove('fundThree')
      let expires = new Date(new Date().getTime() + setStageTime * 60 * 1000);
      this.$cookies.set("key",expires,setStageTime + "MIN");
      let round = new Date(new Date().getTime() + setRoundTime * 1000);
      this.$cookies.set("roundTimes",round, setRoundTime + "S");
      startTime().then(res => {
        this.$cookies.set('startStage',res.data.data.startTime)
        console.log(typeof this.date)
        console.log(this.date)
        console.log(new Date(this.date))
      })
      this.$router.push('/scroll')
    }
    // format(percentage) {
    //     return percentage === 0 ? '满' : `${percentage}%`;
    //   },

  },
}
</script>

<style scoped>
#src{
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
}
#tupian{
  position: absolute;
  left: 36%;
  top: 25%;
}
#color{
    color: #FFC125;
    font-size: 30px;
    position: absolute;
    top: 80px;
    right: 100px;
  }
#background{
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    LightSkyBlue,
    DodgerBlue
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

#logo{
  color: aliceblue;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 8%;
  left: 34%;

}
#countdown{
  color: white;
  font-size: 30px;
  font-weight: 800;
  position: absolute;
  top: 10px;
  right: 100px;
}
#text{
  position: absolute;
  bottom: 9%;
  left: 44%;
}

#wait{
  color: #FFC125;
  font-size: 30px;
  font-weight: 800;
}
.demonstration{
  margin-left: -35px;
  font-size: 19px;
}

</style>
